import React, { useEffect,useState,useRef } from 'react'
import { JumboTabs,InfiniteScroll, List,Tabs,Swiper } from 'antd-mobile'
import { Wrapper } from './style'
import Scroll from '@/components/common/Scroll'
import { forceCheck } from 'react-lazyload'
import RecommendList from '@/components/recommondList'
import { mockRequest } from './mock-request'
import { sleep } from 'antd-mobile/es/utils/sleep'

interface TabProps{
    tabs:any[];
    tuijian:any[];
    haidao:any[];
    bishu:any[];
    zhinan:any[];
    pashan:any[];
    luying:any[];
    manyou:any[];
}
const JumboTab:React.FC<TabProps> = (props) => {
    const swiperRef = useRef(null)
    const {tabs,tuijian,haidao,bishu,zhinan,pashan,luying,manyou}=props
    const [activeIndex, setActiveIndex] = useState(0)
    
    const tabItems = [
        { key: 'tuijian', title: '推荐' },
        { key: 'haidao', title: '夏日海岛' },
        { key: 'bishu', title: '避暑' },
        { key: 'zhinan', title: '玩水指南' },
        { key: 'pashan', title: '周末爬山' },
        { key: 'luying', title: '露营' },
        { key: 'manyou', title: '古镇漫游' },
    ]
  return (
    <Wrapper>
        <Tabs
            activeKey={tabItems[activeIndex].key}
            onChange={key => {
                const index = tabItems.findIndex(item => item.key === key)
                setActiveIndex(index)
                swiperRef.current?.swipeTo(index)
            }}
        >
            {tabItems.map(item => (
                <Tabs.Tab title={item.title} key={item.key} />
            ))}
        </Tabs>
        <Swiper
            direction='horizontal'
            loop
            indicator={() => null}
            ref={swiperRef}
            defaultIndex={activeIndex}
            onIndexChange={index => {
                setActiveIndex(index)
            }}
        >
            <Swiper.Item>
                {/* <RecommendPart /> */}
                <div>
                {/* {sleep(2000)} */}
                    { tuijian &&<Scroll onScroll={forceCheck}>
                        <RecommendList recommend={tuijian} />
                        
                    </Scroll>}
                </div>
            </Swiper.Item>
            <Swiper.Item>
                {/* <CommentsPart /> */}
                <div>
                    <Scroll onScroll={forceCheck}>
                        <RecommendList recommend={haidao} />
                        
                    </Scroll>
                </div>
            </Swiper.Item>
            <Swiper.Item>
                {/* <CommentsPart /> */}
                <div>
                    <Scroll onScroll={forceCheck}>
                        <RecommendList recommend={bishu} />
                        
                    </Scroll>
                </div>
            </Swiper.Item>
            <Swiper.Item>
                {/* <CommentsPart /> */}
                <div>
                    <Scroll onScroll={forceCheck}>
                        <RecommendList recommend={zhinan} />
                        
                    </Scroll>
                </div>
            </Swiper.Item>
            <Swiper.Item>
                {/* <CommentsPart /> */}
                <div>
                    <Scroll onScroll={forceCheck}>
                        <RecommendList recommend={pashan} />
                        
                    </Scroll>
                </div>
            </Swiper.Item>
            <Swiper.Item>
                {/* <CommentsPart /> */}
                <div>
                    <Scroll onScroll={forceCheck}>
                        <RecommendList recommend={luying} />
                        
                    </Scroll>
                </div>
            </Swiper.Item>
            <Swiper.Item>
                {/* <CommentsPart /> */}
                <div>
                    <Scroll onScroll={forceCheck}>
                        <RecommendList recommend={manyou} />
                    </Scroll>
                </div>
            </Swiper.Item>
        </Swiper>


      {/* <Tabs defaultActiveKey='1' className='tab'>
          {
            tabs&&tabs.map((tabitem: { tab: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null | undefined; id: React.Key | null | undefined })=>(
              <Tabs.Tab title={tabitem.tab}  key={tabitem.id}>
                {tabitem.id==1&&
                <div>
                    <Scroll onScroll={forceCheck}>
                        <RecommendList recommend={tuijian} />
                        
                    </Scroll>
                </div>
                }
                {tabitem.id==2&&
                <div>
                    <Scroll onScroll={forceCheck}>
                        <RecommendList recommend={tuijian} />
                        
                    </Scroll>
                </div>
                }
              </Tabs.Tab>
            ))
          }
        </Tabs> */}
    </Wrapper>
  )
}

export default JumboTab
